<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    // 高耦合低内聚
    // 高耦合就是把逻辑紧密的内容放在一个组件中；低内聚把不同组件的依赖关系尽量弱化

    //组件当中的重要内容
    /* 
    1.构建方式
    2.组件的属性
    3.生命周期

    
    */


   //react组件分为3个部分{1.属性props；2.状态state；3.生命周期}

//无状态组件




</script>
<script type="text/babel">

//子组件在父组件中引用
// function MyDomA() {
//     return(
//         <div>无状态组件A</div>
//     )
// }
// function MyDomB() {
//     return(
//         <div>无状态组件B</div>
//     )
// }
// function MyDomC() {
//     return(
//         <div>无状态组件C</div>
//     )
// }
// function MyDomD() {
//     return(
//         <div>无状态组件D</div>
//     )
// }
// function MyDom() {
//     return(
//         <div>
//         <MyDomA/>    
//         <MyDomB/>    
//         <MyDomC/>    
//         <MyDomD/>    
//         </div>
//     )
// }
// // let dom=<div>
// //     <MyDom/><MyDom/><MyDom/><MyDom/><MyDom/>
// //     </div>
// ReactDOM.render(<MyDom/>,document.getElementById('app'))


//传递参数

//函数式组件
// function  MyDom(props) {
//  return(
//      <div>无状态组件 -----{props.name}---{props.gender}</div>
//  )   
// }


// let text='sdfd'

// let obj={
//     name:'张三',
//     gender:'男'
// }
// ReactDOM.render(<MyDom {...obj}/>,document.getElementById('app'))

//props默认值
// function  MyDom(props) {
//  return(
//      <div>无状态组件 -----{props.name}---</div>
//  )   
// }

// //有传值的话会被覆盖
// MyDom.defaultProps={
//     name:'默认值'
// }
// ReactDOM.render(<MyDom name="张三"/>,document.getElementById('app'))


//props验证（上线后需要取消）

//组件之间传参
function MyDom(props) {
    return(
        <div>
            
        <p>子组件</p>
            {props.brr.map((v,i)=>{
                    return(
                        <p key={i}>{v}</p>
                    )

            })}
            </div>
    )
}


let arr=['吃饭','睡觉','打豆豆']
function Dom() {
    return(
      <div>
        <p>父组件</p>
        <MyDom  brr={arr}/> 
        
        </div>
    )
}

ReactDOM.render(<Dom/>,document.getElementById('app'))
</script>
</html>